<!--
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~      http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<span *ngIf="targetFilter" class="ddp-txt-preview">{{getPreview()}}</span>
<!-- filter area -->
<div *ngIf="targetFilter" class="ddp-filter-area"
     #filterArea
     [ngStyle]="{'overflow-y' : ('WIDGET' === mode) ? 'initial !important' : ''}">
  <!-- 기준날 선택 -->
  <div class="ddp-filter-type" style="padding-top:0;">
    <div class="ddp-btn-time" style="height:30px; padding-left:0;">
      <div class="ddp-form-multy" style="padding-left: 70px">
        <span class="ddp-txt-label" >Base Type</span>
        <div class="ddp-box-multy ddp-clear ddp-form-time">
          <!-- Selectbox -->
          <div (click)="isShowBaseComboOpts = !isShowBaseComboOpts"
               (clickOutside)="isShowBaseComboOpts = false"
               [ngClass]="{'ddp-selected' : isShowBaseComboOpts}" class="ddp-type-selectbox"
               style="width:100%">
            <span class="ddp-txt-selectbox">{{baseTypeToString(targetFilter.baseType)}}</span>
            <ul class="ddp-list-selectbox ddp-selectdown ddp-pass">
              <li (click)="setBaseTime(timeRelativeBaseType.TODAY)">
                <a href="javascript:"> {{baseTypeToString(timeRelativeBaseType.TODAY)}} </a>
              </li>
              <li (click)="setBaseTime(timeRelativeBaseType.LATEST_TIME)">
                <a href="javascript:">{{baseTypeToString(timeRelativeBaseType.LATEST_TIME)}}</a>
              </li>
            </ul>
          </div>
          <!-- // Selectbox -->
        </div>
      </div>
    </div>
    <!-- // time -->
  </div>
  <!-- //기준날 선택 -->

  <!-- 과거 선택 -->
  <div class="ddp-filter-type" style="padding-top:35px;">
    <span class="ddp-label-name">Previous</span>
    <ul class="ddp-list-buttons">
      <li (click)="setRelative( 'PREVIOUS', 'DAY', 1 )"
          [class.ddp-selected]="isSelectedRelative('BUTTON', 'PREVIOUS', 'DAY')" style="width: 25%;"
          title="Yesterday">
        {{ isShortLabel ? 'D' : 'Yesterday' }}
      </li>
      <li (click)="setRelative( 'PREVIOUS', 'WEEK', 1 )"
          [class.ddp-selected]="isSelectedRelative('BUTTON', 'PREVIOUS', 'WEEK')" style="width: 25%;"
          title="Last Week">
        {{ isShortLabel ? 'W' : 'Last Week' }}
      </li>
      <li (click)="setRelative( 'PREVIOUS', 'MONTH', 1 )"
          [class.ddp-selected]="isSelectedRelative('BUTTON', 'PREVIOUS', 'MONTH')" style="width: 25%;"
          title="Last Month">
        {{ isShortLabel ? 'M' : 'Last Month' }}
      </li>
      <!--
      <li (click)="setRelative( 'PREVIOUS', 'QUARTER', 1 )"
          [class.ddp-selected]="isSelectedRelative('BUTTON', 'PREVIOUS', 'QUARTER')">
        {{ 'CHANGE' === mode ? 'Last Quarter' : 'Q' }}
      </li>
      -->
      <li (click)="setRelative( 'PREVIOUS', 'YEAR', 1 )"
          [class.ddp-selected]="isSelectedRelative('BUTTON', 'PREVIOUS', 'YEAR')" style="width: 25%;"
          title="Last Year">
        {{ isShortLabel ? 'Y' : 'Last Year' }}
      </li>
    </ul>
    <div [class.ddp-selected]="isSelectedRelative('INPUT', 'PREVIOUS')" class="ddp-btn-time" style="height:30px;">
      <div class="ddp-form-multy">
        <span class="ddp-txt-label" >Last</span>
        <div class="ddp-box-multy ddp-clear ddp-form-time">
          <component-input
            [value]="targetFilter.value"
            [valueType]="'number'"
            [inputClass]="'ddp-input-typebasic'"
            [autoFocus]="false"
            (changeValue)="setFilterValue($event)"></component-input>
          <!-- Selectbox -->
          <div (click)="isShowLastComboOpts = !isShowLastComboOpts"
               (clickOutside)="isShowLastComboOpts = false"
               [ngClass]="{'ddp-selected' : isShowLastComboOpts}" class="ddp-type-selectbox" >
            <span class="ddp-txt-selectbox">{{selectedTimeUnitItem.name}}</span>
            <ul class="ddp-list-selectbox ddp-selectdown ddp-pass">
              <li *ngFor="let item of timeUnitComboList"
                  (click)="setRelative('PREVIOUS', item.value.toString());" >
                <a href="javascript:"> {{item.name}} </a>
              </li>
            </ul>
          </div>
          <!-- // Selectbox -->
        </div>
      </div>
    </div>
    <!-- // time -->
  </div>
  <!-- // 과거 선택 -->
  <!-- 현재 선택 -->
  <div class="ddp-filter-type">
    <span class="ddp-label-name">Current</span>
    <ul class="ddp-list-buttons">
      <li (click)="setRelative( 'CURRENT', 'DAY', 1 )"
          [class.ddp-selected]="isSelectedRelative('BUTTON', 'CURRENT', 'DAY')" style="width: 25%;"
          title="Today">
        {{ isShortLabel ? 'D' : 'Today' }}
      </li>
      <li (click)="setRelative( 'CURRENT', 'WEEK', 1 )"
          [class.ddp-selected]="isSelectedRelative('BUTTON', 'CURRENT', 'WEEK')" style="width: 25%;"
          title="This Week">
        {{ isShortLabel ? 'W' : 'This Week' }}
      </li>
      <li (click)="setRelative( 'CURRENT', 'MONTH', 1 )"
          [class.ddp-selected]="isSelectedRelative('BUTTON', 'CURRENT', 'MONTH')" style="width: 25%;"
          title="This Month">
        {{ isShortLabel ? 'M' : 'This Month' }}
      </li>
      <!--
      <li (click)="setRelative( 'CURRENT', 'QUARTER', 1 )"
          [class.ddp-selected]="isSelectedRelative('BUTTON', 'CURRENT', 'QUARTER')">
        {{ 'CHANGE' === mode ? 'This Quarter' : 'Q' }}
      </li>
      -->
      <li (click)="setRelative( 'CURRENT', 'YEAR', 1 )"
          [class.ddp-selected]="isSelectedRelative('BUTTON', 'CURRENT', 'YEAR')" style="width: 25%;"
          title="This Year" >
        {{ isShortLabel ? 'Y' : 'This Year' }}
      </li>
    </ul>
  </div>
  <!-- // 현재 선택 -->
  <!-- 미래 선택 -->
  <div class="ddp-filter-type">
    <span class="ddp-label-name">Next</span>
    <ul class="ddp-list-buttons">
      <li (click)="setRelative( 'NEXT', 'DAY', 1 )"
          [class.ddp-selected]="isSelectedRelative('BUTTON', 'NEXT', 'DAY')" style="width: 25%;"
          title="Tomorrow">
        {{ isShortLabel ? 'D' : 'Tomorrow' }}
      </li>
      <li (click)="setRelative( 'NEXT', 'WEEK', 1 )"
          [class.ddp-selected]="isSelectedRelative('BUTTON', 'NEXT', 'WEEK')" style="width: 25%;"
          title="Next Week">
        {{ isShortLabel ? 'W' : 'Next Week' }}
      </li>
      <li (click)="setRelative( 'NEXT', 'MONTH', 1 )"
          [class.ddp-selected]="isSelectedRelative('BUTTON', 'NEXT', 'MONTH')" style="width: 25%;"
          title="Next Month">
        {{ isShortLabel ? 'M' : 'Next Month' }}
      </li>
      <!--
      <li (click)="setRelative( 'NEXT', 'QUARTER', 1 )"
          [class.ddp-selected]="isSelectedRelative('BUTTON', 'NEXT', 'QUARTER')">
        {{ 'CHANGE' === mode ? 'Next Quarter' : 'Q' }}
      </li>
      -->
      <li (click)="setRelative( 'NEXT', 'YEAR', 1 )"
          [class.ddp-selected]="isSelectedRelative('BUTTON', 'NEXT', 'YEAR')" style="width: 25%;"
          title="Next Year">
        {{ isShortLabel ? 'Y' : 'Next Year' }}
      </li>
    </ul>
    <div [class.ddp-selected]="isSelectedRelative('INPUT', 'NEXT')" class="ddp-btn-time" style="height:30px;">
      <div class="ddp-form-multy">
        <span class="ddp-txt-label" >Next</span>
        <div class="ddp-box-multy ddp-clear ddp-form-time">
          <component-input
            [value]="targetFilter.value"
            [valueType]="'number'"
            [inputClass]="'ddp-input-typebasic'"
            [autoFocus]="false"
            (changeValue)="setFilterValue($event)"></component-input>
          <!-- Selectbox -->
          <div (click)="isShowNextComboOpts = !isShowNextComboOpts"
               (clickOutside)="isShowNextComboOpts = false"
               [ngClass]="{'ddp-selected' : isShowNextComboOpts}" class="ddp-type-selectbox" >
            <span class="ddp-txt-selectbox">{{selectedTimeUnitItem.name}}</span>
            <ul class="ddp-list-selectbox ddp-selectdown ddp-pass">
              <li *ngFor="let item of timeUnitComboList"
                  (click)="setRelative('NEXT', item.value.toString());" >
                <a href="javascript:"> {{item.name}} </a>
              </li>
            </ul>
          </div>
          <!-- // Selectbox -->
        </div>
      </div>
    </div>
    <!-- //time -->
  </div>
  <!-- // 미래 선택 -->
</div>
<!-- // filter area -->
